<template>
  <a-layout class="registercontent">
    <a-form
      class="registerform"
      :model="user"
      :label-col="labelCol"
      :wrapper-col="wrapperCol"
    >
     <a-typography-title style="text-align:center">用户注册</a-typography-title>
      <a-form-item label="账号：" :wrapper-col="{ span: 15, offset: 4 }">
        <a-input  v-model:value="user.u_id"/>
      </a-form-item>
      <a-form-item label="姓名" :wrapper-col="{ span: 15, offset: 4 }">
        <a-input  v-model:value="user.u_name"/>
      </a-form-item>
      <a-form-item label="身份证号" :wrapper-col="{ span: 15, offset: 4 }">
        <a-input  v-model:value="user.u_id_number"/>
      </a-form-item>
      <a-form-item label="电话：" :wrapper-col="{ span: 15, offset: 4 }">
        <a-input  v-model:value="user.u_ph_number"/>
      </a-form-item>
      <a-form-item label="密码" :wrapper-col="{ span: 15, offset: 4 }">
        <a-input-password  v-model:value="user.u_pwd"/>
      </a-form-item>
      <a-form-item label="确认密码" :wrapper-col="{ span: 15, offset: 4 }">
        <a-input-password  v-model:value="user.u_pwd1"/>
      </a-form-item>

      <a-form-item :wrapper-col="{ span: 15, offset: 8 }">
        <a-row type="flex" justify="space-between">
          <a-button type="primary" @click="register">注册</a-button>
          <a-button type="primary" >上链</a-button>
          <a-button type="primary" @click="cancel">返回</a-button>
        </a-row>
      </a-form-item>
    </a-form>
  </a-layout>
  
</template>
<script setup>
import { reactive } from "vue";
import { post, setLocalToken, tip, get } from "@/common";

import { useRouter } from "vue-router";

const router = useRouter(); //获取用户路由

//reactive 用于双向绑定响应
const user = reactive({
  u_id: "",
  u_pwd: "",
  u_id_number:"",
  u_ph_number:"",
  u_name:"",
  u_pwd1:"",
});

//  const login = () => {
//     post("/security/login", user).then((res) => {
//       console.log(res);
//       tip.success("登录成功！");
//       const token = res.data; //获取返回的令牌
//       //将令牌缓存本地
//       setLocalToken(token);
//       //跳转至home路由
//       router.push({ path: "/home" });
//     });
//   };
const register = () => {
  if(user.u_pwd==user.u_pwd1){
    post("/security/register", user).then((res) => {
      console.log(res);
      tip.success("注册成功！");     
      router.push({ path: "/login" });
    });
  }else{
    tip.success("两次输入密码不一致");     
  }
};

const cancel = () => {
  //跳转至home路由
  router.push({ path: "/login" });
};




//一行24列
const labelCol = {
  span: 4,
};
const wrapperCol = {
  span: 10,
};
</script>

<style>
.registercontent {
  display: flex;
  flex-direction: column;
  background-size:100% 100% ; 
  background-attachment: fixed;

  width: 100%;
  height: 100%;
  min-width: 900px;
  min-height: 1000px;

  justify-content: center;
  align-items: center;
}
.registerform {
  background-color: #fff;
  min-width: 600px;
  box-shadow: rgba(0, 0, 0, 0.1) 0px 15px 30px;
  padding: 30px 20px;
}
</style>